<template>
    <div>
        <div>
            <el-row class="list_label">
                <el-col :span="16">
                    <el-radio-group v-model="receType" size="small">
                        <div v-if="getGetters('user').registertype == 1 || getQuery('registertype') == 1">
                            <el-radio-button label="3">出函机构</el-radio-button>
                        </div>
                        <div v-if="getGetters('user').registertype == 2 || getQuery('registertype') == 2">
                            <div v-if="getGetters('user').isfxs == true  || getQuery('isfxs') == 'true'">
                                <el-radio-button label="2" >分销商</el-radio-button>
                            </div>
                            <div v-else>
                                <el-radio-button label="1">保函平台</el-radio-button>
                                <el-radio-button label="3">出函机构</el-radio-button>
                            </div>
                        </div>
                        <div v-if="getGetters('user').registertype == 3 || getQuery('registertype') == 3">
                            <el-radio-button label="1">保函平台</el-radio-button>
                            <el-radio-button label="2" >分销商</el-radio-button>
                        </div>
                    </el-radio-group>
      
                        
                    <span style="padding-left:10px">已结算合计：{{settAmount}} 元</span>
      
                </el-col>
                <el-col :span="8">
                    <el-button size="small" type="primary" style="float:right" @click="exportList">导出excel</el-button>
                </el-col>
            </el-row>
            <el-table :data="tableData"  border :height="500">
                <el-table-column type="index" width="40"></el-table-column>
                <el-table-column prop="parentName" label="清单名称" >
                    <template slot-scope="scope" >
                        {{scope.row.parentName }}{{scope.row.isChangnei == 0 ? '-场外' : '-场内'}}
                    </template>
                </el-table-column>
                <el-table-column prop="childAmount" label="清单总额" ></el-table-column>
                <el-table-column prop="settAmount" label="结算金额"></el-table-column>
                <el-table-column prop="receName" label="结算单位"></el-table-column>
                <el-table-column prop="isConfirm" label="确认状态">
                    <template slot-scope="scope" >
                        <el-tag v-if="scope.row.isConfirm == 0" type="info" size="small">未确认</el-tag>
                        <el-tag v-if="scope.row.isConfirm == 1" type="success" size="small">已确认</el-tag>
                        <p v-if="scope.row.isConfirm == 1">{{scope.row.confirmTime}}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="isSett" label="结算状态">
                    <template slot-scope="scope" >
                        <el-tag v-if="scope.row.isSett == 0" type="info" size="small">未结算</el-tag>
                        <el-tag v-if="scope.row.isSett == 1" type="success" size="small">已结算</el-tag>
                         <p v-if="scope.row.isSett == 1">{{scope.row.settTime}}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="isInvoice" label="开票状态">
                    <template slot-scope="scope" >
                        <el-tag v-if="scope.row.isInvoice == 0" type="info" size="small">未开票</el-tag>
                        <el-tag v-if="scope.row.isInvoice == 1" type="success" size="small">已开票</el-tag>
                         <p v-if="scope.row.isInvoice == 1">{{scope.row.invoiceTime}}</p>
                    </template>
                </el-table-column>

                <el-table-column prop="" label="操作" min-width="120">
                    <template slot-scope="scope" >
                        <el-button type="text"  @click="goDetail(scope.row)">查看详情</el-button>
                        <el-button type="text"  @click="kfp(scope.row)" v-show="scope.row.isConfirm == 1 && scope.row.isInvoice != 1">开具发票</el-button>
                        <el-button type="text"  @click="checkPz(scope.row)" v-if="scope.row.isInvoice == 1 && scope.row.isSett == 1" >查看凭证</el-button>
                        <el-button type="text"  @click="downloadfp(scope.row)" v-if="scope.row.isInvoice == 1 ">下载发票</el-button>
                    </template>
                </el-table-column>
            </el-table> 

            <!-- 开具发票-->
            <my-dialog
                :title="formTitle"
                :width="'40%'"
                v-model="dialogUploadfpVisible">
                <uploadfp ref="uploadfp" v-if="dialogUploadfpVisible" @close="dialogUploadfpVisible = false" :rowguid="childrowguid" :needinvoice="needinvoice" ></uploadfp>
            </my-dialog>

            <!-- 查看凭证 -->
            <my-dialog
                class="pingzheng"
                :title="formTitle"
                :width="'50%'"
                v-model="dialogPingzhengVisible">
                <div >
                    <img :src="imgurl" alt="" style="width:100%">
                </div>
            </my-dialog>
        </div>
    </div>
</template>

<script>
import uploadfp from './uploadfp'
export default {
    props: {
        rowguid: {
            type: String,
            default: ''
        }
    },
    components:{uploadfp},
    data () {
        return {
            tableData:[],
            receType:'',
            formTitle:'',
            dialogUploadfpVisible:false,
            dialogPingzhengVisible:false,
            childrowguid:'',
            imgurl:'',
            settAmount:'',
            needinvoice:'',
        }
    },
    computed: {
  
    },
    watch:{
        receType:function(n,o){
            if(!!o && n != o ){
                this.getChildList();
            }
        },
        dialogUploadfpVisible:function(n,o){
            if(!n){
                this.getChildList();
            }
        }
    },
	methods:{
        cancle:function(){
            this.$emit('close');
        },
        getChildList:function(){
            this.$get(`${this.getGetters('settUrl')}/settItem/listChild`,{
                receType:this.receType,
                rowguid:this.rowguid,
            },function(data){
                this.tableData = data.list;
                this.settAmount = data.settAmount;
            })
        },
        //导出excel
        exportList:function(){
            if(this.tableData.length !=0){
                var search = toSearch({
                    receType:this.receType,
                    rowguid:this.rowguid,
                    isExport: true,
                    token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
                });
                window.open('/bhtong/settmg/settItem/listChild' + search);
            }else{
                ShowMsg('当前清单暂无数据，暂不支持导出', 'warning');
            }
        },
        goDetail:function(row){
            if(this.getQuery('token')){
            this.goto({
                path: './childdetail',
                query: {
                    rowguid: row.rowguid,
                    token:this.getQuery('token')
                }
            })
            }else{
                this.goto({
                    path: './childdetail',
                    query: {
                        rowguid: row.rowguid
                    }
                }) 
            }
        },
        //开具发票
        kfp:function(row){
            this.needinvoice = this.getQuery('needinvoice') ? this.getQuery('needinvoice') : this.getGetters('user').needinvoice
            this.formTitle = '上传发票';
            this.dialogUploadfpVisible = true;
            this.childrowguid = row.rowguid;
        },
        //查看凭证
        checkPz:function(row){
            if(row.settFile){
                var search = toSearch({
                    token:this.getQuery('token') ? this.getQuery('token') : this.getGetters('user').token
                });
                this.imgurl =  '/bhtong/' + row.settFile + search
                this.formTitle = '查看凭证';
                this.dialogPingzhengVisible = true;
            }else{
                ShowMsg('当前清单暂无凭证','warning');
            }
        },
        //下载发票
        downloadfp:function(row){
            var search = toSearch({
                fileName:row.invoiceFile
            });
            window.open('/bhtong/common/file/download' + search)
        },
        //设置机构类型
        SetReceType:function(){
            if(this.getGetters('user').registertype == 1 || this.getQuery('registertype') == 1){
                this.receType = '3';
            }else if((this.getGetters('user').registertype == 2 || this.getQuery('registertype') == 2) && (this.getGetters('user').isfxs == true  || this.getQuery('isfxs') == 'true')){
                this.receType = '2';
            }
            else{
                this.receType = '1';
            }
        }
	},
	mounted:function(){
        this.SetReceType();
        this.getChildList();
	}
}
</script>

<style scoped lang="scss">

.list_label{
    line-height: 32px;
    padding-bottom: 10px;
}
::v-deep .el-table th > .cell {
    text-align: center;
}
::v-deep .el-table .cell {
    text-align: center;
}   

</style>
